<template>
  <div v-if="showmap">
    <!-- 地图 -->
    <div class="amap-page-container">
      <el-amap
        vid="amap"
        :plugin="plugin"
        :zoom="15"
        :class="$style.amap"
        style="height:800px"
        :center="center"
        mapStyle="fresh"
        :events="events"
        :map-manager="amapManager"
      >
        <!-- 圆圈 -->
        <el-amap-circle
          v-for="circle in circles"
          :center="circle.center"
          :radius="circle.radius"
          :fill-opacity="circle.fillOpacity"
          :fill-color="circle.fillColor"
          :stroke-color="circle.strokeColor"
          :events="circle.events"
          :key="circle.radius"
        >
        </el-amap-circle>
        <!-- 标记点 -->
        <el-amap-marker
          vid="component-marker"
          :position="marker.position"
        ></el-amap-marker>
        <!-- 搜索标记点 -->
        <el-amap-marker
          v-for="(v, k) in searchMarker"
          :key="k + v.position"
          vid="component-marker"
          :position="v.position"
        ></el-amap-marker>
        <!-- =========================================================
   ⚠️  可疑车辆
   ========================================================= -->
        <a-collapse
          :class="$style.panel"
          @change="getCarnoInfo"
          v-if="showPanel"
        >
          <a-collapse-panel
            key="1"
            header="接触车辆信息"
            :class="$style.content"
          >
            <a-table
              :data-source="data"
              :columns="columns"
              :scroll="{ x: 1000, y: 450 }"
              :rowKey="
                (record) => {
                  return record.geohash
                }
              "
            >
            </a-table>
            <p>
              接触最多车辆ID
              <a-tag color="blue">
                {{ sort.name }}
              </a-tag>
            </p>
            <p>
              次数
              <a-tag color="blue">
                {{ sort.count }}
              </a-tag>
            </p>
          </a-collapse-panel>
        </a-collapse>
      </el-amap>
    </div>
    <!--  -->
    <!-- 滑动条 -->
    <div :class="$style.slider">
      <a-slider
        vertical
        :default-value="30"
        :max="2400"
        :step="10"
        @change="slideChange"
      />
    </div>
    <!--  -->
    <!-- 地图信息modal -->
    <a-modal v-model="visibleItem.info" title="地图信息" :footer="null">
      <div v-for="(v, k) in mapInfo" :key="k">
        <p>
          {{ v.text }}<span :class="$style.dataText">{{ v.data }}</span>
        </p>
        <a-divider />
      </div>
    </a-modal>
    <!--  -->
    <!-- 附近信息查询modal -->
    <a-modal
      v-model="visibleItem.near"
      title="附近信息查询"
      @ok="searchNear"
      okText="搜索"
      cancelText="取消"
    >
      <div :class="$style.radioGroup">
        <a-badge status="processing" text="选择数据库" :class="$style.badege" />
        <a-radio-group v-model="radioValue">
          <a-radio v-for="(v, k) in radio" :value="k + 1" :key="k">
            {{ v }}
          </a-radio>
        </a-radio-group>
      </div>
      <a-badge status="processing" text="选择时间" :class="$style.badege" />
      <a-range-picker
        :default-value="dateValue"
        :show-time="{ format: 'HH:mm' }"
        format="YYYY-MM-DD HH:mm"
        :placeholder="['开始时间', '结束时间']"
        @ok="changeTime"
      />
      <div v-if="!_.isEmpty(listData)">
        <a-divider />
        <a-badge status="processing" text="查询时间" :class="$style.badege" />
        <p>{{ searchTotal.time }}秒</p>
        <a-badge status="processing" text="查询结果数" :class="$style.badege" />
        <p>{{ searchTotal.num }}</p>
      </div>
    </a-modal>
    <!--  -->
    <!-- 轨迹检索modal -->
    <Table :data="listData" @change-marker="changeMarker"></Table>
    <!--  -->
  </div>
</template>

<script>
import { AMapManager } from 'vue-amap'
import { circle } from '@/views/map/circle'
import { marker } from '@/views/map/marker'
import { map } from '@/views/map/map'
import table from '@/components/table.vue'
import dayjs from 'dayjs'
import moment from 'moment'
import axios from 'axios'
import qs from 'qs'

axios.defaults.timeout = 100000
axios.defaults.baseURL = 'http://127.0.0.1:2904/'
let amapManager = new AMapManager()
export default {
  props: ['type'],
  mixins: [circle, map, marker],
  components: { Table: table },
  data() {
    return {
      amapManager,
      geohashNum: 8,
      carno: null,
      showPanel: false,
      visibleItem: {
        info: false,
        near: false,
        road: false
      },
      sort: {
        name: null,
        count: null
      },
      data: null,
      columns: [
        {
          title: '车辆标识',
          width: 300,
          dataIndex: 'carno',
          key: 'carno'
        },
        {
          title: '时间',
          width: 200,
          dataIndex: 'time',
          key: 'time',
          defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
          sorter: (a, b) => {
            return a.time > b.time ? 1 : -1
          }
        },
        {
          title: '经度',
          width: 200,
          dataIndex: 'lng',
          key: 'lng'
        },
        {
          title: '纬度',
          width: 200,
          dataIndex: 'lat',
          key: 'lat'
        }
      ],
      timeInfo: [],
      listData: [],
      radio: ['mysql', 'hbase', 'redis', 'elasticsearch'],
      radioValue: 1,
      searchTotal: {
        time: 0,
        num: 0
      }
    }
  },
  computed: {
    mapInfo: function() {
      return [
        {
          text: '地图中心坐标：',
          data: `经度：${this.center[0].toFixed(
            5
          )} | 纬度：${this.center[1].toFixed(5)}`
        },
        {
          text: '圆范围半径：',
          data: `${this.circles[0].radius} 米`
        },
        {
          text: 'Geohash值：',
          data: this.geohashNum
        }
      ]
    },
    dateValue: function() {
      return [
        moment('2019/06/07', 'YYYY-MM-DD hh:mm:ss'),
        moment('2019/06/07', 'YYYY-MM-DD hh:mm:ss')
      ]
    }
  },
  methods: {
    slideChange(e) {
      if (e <= 2400 && e >= 610) {
        this.geohashNum = 6
      } else if (e < 610 && e >= 150) {
        this.geohashNum = 7
      } else {
        this.geohashNum = 8
      }
      this.circles[0].radius = e
    },
    searchNear() {
      const timer = setInterval(() => {
        this.searchTotal.time += 0.01
      }, 10)
      this.searchMarker = []
      axios({
        method: 'post',
        url: 'geohash',
        data: qs.stringify({
          lng: this.center[0],
          lat: this.center[1]
        })
      }).then((res) => {
        const num_str = res.data.data.substring(0, this.geohashNum)
        axios({
          method: 'post',
          url: 'search',
          data: qs.stringify({
            geohash: num_str,
            start: this.timeInfo[0],
            end: this.timeInfo[1]
          })
        }).then((res) => {
          console.log(res)
          clearInterval(timer)
          const length = res.data.data.length
          this.searchTotal.num = length
          const data = res.data.data
          if (this._.isEmpty(data)) {
            this.$notification.open({
              message: '提示',
              description: '没有查询到结果！'
            })
          }
          this.listData = data
          for (let i = 0; i < length; i++) {
            this.searchMarker.push({ position: [data[i].lng, data[i].lat] })
            this.$set(this.searchMarker, i, {
              position: [data[i].lng, data[i].lat]
            })
          }
        })
      })
    },
    changeTime(e) {
      this.timeInfo = []
      this.timeInfo.push(dayjs(e[0]._d).format('YYYY-MM-DD hh:mm:ss'))
      this.timeInfo.push(dayjs(e[1]._d).format('YYYY-MM-DD hh:mm:ss'))
    },
    getCarnoInfo() {
      axios({
        method: 'post',
        url: 'getCarnoInfo'
      }).then((res) => {
        this.sort.name = res.data.name
        this.sort.count = res.data.count
        this.data = res.data.data
      })
    },
    // 轨迹绘制
    changeMarker(data) {
      this.showPanel = true
      this.$message.success(`第${this.roadPage}次请求`)
      this.carno = data
      axios({
        method: 'post',
        url: 'searchid',
        data: qs.stringify({
          page: this.roadPage,
          carno: data
        })
      }).then((res) => {
        const data = res.data.data
        if (this.roadPage === 1) {
          this.$nextTick(() => {
            this.reload()
          })
        }
        if (data.length !== 0) {
          this.roadPage += 1
        } else {
          this.request = false
        }
        for (let i = 0; i < data.length; i++) {
          this.gpsPath.push([data[i].lng, data[i].lat])
        }
      })
    }
  },
  watch: {
    geohashNum(val) {
      this.$message.info(`当前GeoHash精度：${val}`)
    },
    type(val) {
      this.visibleItem[val] = true
    }
  }
}
</script>

<style module lang="scss">
.amap {
  width: 100%;
  z-index: 99;
  position: relative;
}

.panel {
  position: absolute;
  top: 0;
  width: 60%;
  opacity: 0.9;
  .content {
    overflow: auto;
  }
}

.slider {
  height: 600px;
  position: fixed;
  right: 20px;
  top: 250px;
}

.dataText {
  font-weight: 800;
}

.badege {
  margin-right: 10px !important;
}

.radioGroup {
  margin-bottom: 15px !important;
}
</style>
